<template>
		<view class="Global">
		
		<!-- 背景图片铺满 -->
		<!-- <image class="imagepage" src="/static/background@2x.png" mode=""></image> -->
		<bgImage></bgImage>
	<!-- 	<view class="personnel" :style="{'height':tarbarHeight+'px'}">
			<image @click="backOnClick" src="../../../static/logo.png" class="backImg" mode=""></image>
			<text class="title">{{personnelInfo}}</text>
		</view>
		 -->
		
		<MyNav :title="title" bgColor="" :backIcon="isback"></MyNav>
		
		
		
		<view class="contentOut">
			
			<view class="contentInner">
				
				<view class="contentItem" >
				
					<view class="contentItemTextLeftContent">
						<text class="contentItemTextLeft">工号</text>
						<text class="contentItemTextLeftStart">*</text>
					</view>
					<input class="contentItemTextRight" type="text" value="111" />
				
				
				</view>
				<view class="lineBg"></view>
				
				<view class="contentItem" >
				
					<view class="contentItemTextLeftContent">
						<text class="contentItemTextLeft">姓名</text>
						<text class="contentItemTextLeftStart">*</text>
					</view>
					<input class="contentItemTextRight" type="text" value="111" />
				
				
				</view>
				
				<view class="lineBg"></view>
				
				<view class="contentItem2">
				
					<view class="contentItemTextLeftContent">
						<text class="contentItemTextLeft">离职日期</text>
						<text class="contentItemTextLeftStart">*</text>
					</view>
				
					<view class="contentItemRightContent">
						<text class="contentItemTextLeft">2023</text>
						<image class="contentItemRightContentImg" src="/static/gongzuotai/xia_jiantou@2x.png" mode="">
						</image>
					</view>
				
				</view>
				
				
				
				
				<view class="contentItem4">
					<text class="contentItemTextLeft">离职原因</text>
				</view>
				
				<view class="contentItem5">
					
					<textarea  class="contentItem2Input" value="" placeholder="111" />
				</view>
				
			</view>
			
		</view>
		
		
		
		
		<view class="loginContent">
		
				<button @click="AddData()" style="color:#ffffff" class="login" type="default">{{login}}</button>
			</view>
		
		
	</view>
</template>

<script>
	import MyNav from '@/components/customnavbar.vue'
	import bgImage from '@/components/backgroundImage.vue'
	
	export default {
		components: {
			MyNav,
			bgImage
		},
	data() {
		return {
			title:'离职办理',
			isback:true,
			
				personnelInfo: '离职办理',
				tops: 0,
				height: 0,
				tarbarHeight: 0,
				login: '确定',
			}
		},
		methods: {
			backOnClick() {
				uni.navigateBack({
					delta: 1
				});
				console.log('点击返回');
			}
		},
		onReady() {
			// 获取标题栏和状态栏高度
			uni.getSystemInfo({
				success: (e) => {
					this.tops = e.statusBarHeight;
					let custom = uni.getMenuButtonBoundingClientRect();
					this.height = custom.height + (custom.top - e.statusBarHeight) * 2;
					this.tarbarHeight = this.tops + this.height;
				}
			})
		
		}
	}
</script>

<style>
	
	
	.loginContent {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 750rpx;
		
	
	}
	
	.login {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 20rpx;
		width: 690rpx;
		height: 100rpx;
		background: linear-gradient(90deg, #45A8FF, #0AE1C6);
		border-radius: 20rpx;
		margin-bottom: 20rpx;
	
	
		font-weight: 400;
		font-size: 36rpx;
		color: #FFFFFF;
		text-align: center;
		font-weight: bold;
	
		margin-top: 60rpx;
		background: linear-gradient(90deg, #45A8FF, #0AE1C6);
	
	}
	
	.contentItemTextRight {
		font-size: 28rpx;
		font-weight: 600;
		color: #666666;
		margin-right: 30rpx;
		width: 200rpx;
		text-align: right;
	}
	
	.contentItemTextLeftStart {
		color: red;
	}
	
	.contentItemRightContentImg {
		width: 20rpx;
		height: 10rpx;
		margin-left: 15rpx;
		margin-right: 15rpx;
	
	}
	
	.contentItemTextLeft {
		font-size: 28rpx;
		font-weight: 600;
		color: black;
		margin-left: 30rpx;
	}
	
	.contentItem2Input{
		width: 630rpx;
		height: 200rpx;
		background: #F5F7F9;
		border-radius: 20rpx;
		
		
		text-align: left;
		
	}
	.contentItem5{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
			
		width: 690rpx;
		height: 200rpx;
			
			
		
	}
	.contentItem4{
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: row;
		width: 690rpx;
		height: 80rpx;
		
	}
	.contentItem2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: row;
		
		width: 690rpx;
		height: 120rpx;
		
	
	}
	
	.lineBg {
		width: 100%;
		height: 1rpx;
		background: #F9FCFF;
	}
	
	.contentItemRightContent {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	
	
	.contentItemTextLeftContent {
	
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	
	.contentItem {
	
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-direction: row;
	
		width: 690rpx;
		height: 120rpx;
	
		
		
	
	}
	
	
	.contentInner{
		display: flex;
		flex-direction: column;
		justify-content: center;
		width: 690rpx;
	
		background: #FFFFFF;
		border-radius: 30rpx;
		
		
	
		height: 692rpx;
	}
	
	.contentOut{
		display: flex;
		flex-direction: column;
		align-items: center;
		
		
	}
	
	.imagepage {
	
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;
		position: absolute;
		z-index: -1;
		left: 0;
		right: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 100%;
		
	}

</style>
